<template>
	<div class="flex-1 flex flex-col">
		<base-nav-bar titleT="myBets.title" isGoback></base-nav-bar>
		<div class="h-group-t-big" />
		<div class="switch-tab__wrapper">
			<base-switch-tabs
				:modelValue="tab"
				@update:modelValueAll="handleChangeTab"
				:data="tabList"
				:translation="true"
				:isUseLocalIcon="false"
				style="--min-width: auto"
				activeTextBold />
		</div>
		<div class="h-group-t-big"></div>
		<component :is="component" />
		<!-- <div class="flex justify-between items-center">
			<up-switch-tabs v-model="tab" />
			<base-icon name="result" class="text-[26px]" @click="profileStore.setReportShow(true)" />
		</div>
		<component :is="component" /> -->
	</div>
</template>

<script lang="ts" setup>
import { BaseNavBar, BaseSwitchTabs } from '@/components/base'
import { UpSwitchTabsEnum } from '@/components/up'
import SportsMyBets from '@/views/sports/sports-my-bets/index.vue'
import SlotsMyBets from '@/views/slots/slots-my-bets/index.vue'
import CasinoMyBets from './casino/index.vue'
import { computed, ref, watch } from 'vue'
//import { useProfileStore } from '@/store'
import { MY_BETS_TAB } from '@/constants'
import { setItem } from '@/utils'

//const profileStore = useProfileStore()

//const tab = ref(getItem(MY_BETS_TAB) || UpSwitchTabsEnum.sports)

const component = computed(() => {
	if (tab.value === UpSwitchTabsEnum.sports) {
		return SportsMyBets
	} else if (tab.value === UpSwitchTabsEnum.slots) {
		return SlotsMyBets
	} else if (tab.value === 'casino') {
		return CasinoMyBets
	} else {
		return null
	}
})

const tabList = ref([
	{
		id: 'casino',
		name: 'app.casino'
	},
	{
		id: 'sports',
		name: 'app.sports'
	}
])
const tab = ref('casino')
const handleChangeTab = (val: any) => {
	tab.value = val.id
}
watch(tab, (val) => {
	setItem(MY_BETS_TAB, val)
})
</script>
